<template>
<view>
  <view class="content">
    <!-- <view class="switch-store" @click="checkStore">切换门店</view> -->
    <view class="head-bg">
      <swiper class="swiper-box" style="height: 500rpx" :autoplay="true" :circular="true" @change="change">
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image :src="item.picUrl" mode="scaleToFill" />
        </swiper-item>
      </swiper>
      <!-- <image src="/static/banner.png" mode=""></image> -->
    </view>
    <view class="main">
      <view class="login-user box">
        <view class="login-user-l" v-if="!userInfo.mobile">
          <image
          class="logo"
            src="/static/home-logo.png"
          />
          <view class="login-user-m">
            <view class="m-t">24小时自助开台</view>
            <view class="m-b">注册解锁更多惊喜</view>
          </view>
        </view>
        <view class="login-user-l" v-if="userInfo.mobile">
          <!-- <image
          class="avatar"
            :src="userInfo.avatar"
          /> -->
          <view class="login-user-m">
            <view>{{userInfo.nickname || 'Hi~'}}</view>
          </view>
        </view>
        <view class="login-user-r" v-if="!userInfo.mobile" @click="goLogin">注册/登录</view>
        <view class="login-user-r" v-if="userInfo.mobile" @click="goCoupon">{{ counponNum }}张优惠劵</view>
        
        <!-- <view class="counpon" v-if="userInfo.mobile" @click="goCoupon">
          <view>我的优惠劵</view>
          <view class="num">{{ counponNum }}</view>
         <image class="jt" src="/static/jt.png" />
        </view> -->
      </view>
      <view class="info box">
        <view class="info-tit">
          <view class="title">{{ store.shopName }}
            <image @click="telPhone" class="tel" src="/static/phone.png" v-if="store.shopTel" />
            <image @click="showWxCode" class="wxcode" src="/static/wx.png" />
          </view>
          <view class="switch-store" @click="checkStore">
            <view>切换门店</view>
            <image src="/static/switch.png" />
          </view>
        </view>
        <view class="info-c">
          <view>
            <view class="price">￥48.00/小时起</view>
            <view class="info-c-b">
              <view class="business-hours">
                <view class="business">营业中</view>
                <view class="hours">7*24小时营业</view>
              </view>
              <!-- <view class="contact">
                <image @click="showWxCode" src="/static/wx.png" />
                <image @click="telPhone" src="/static/phone.png" />
              </view> -->
            </view>
          </view>
          <view class="info-c-r" @click="goRecharge">
            <view class="info-c-r-t">¥{{ myMoney.balance / 100 }}</view>
            <view class="info-c-r-b">
              <text>会员充值</text>
              <image class="jt" src="/static/jt-b.png" />
            </view>
          </view>
        </view>
        <view class="tips" v-if="noticeList.length > 0">
          <swiper
            style="height: 60rpx"
            autoplay
            circular
            :vertical="true"
          >
            <swiper-item style="background-color: rgb(255,249,234);color: #de8c17;display: flex;align-items: center;" v-for="(item, index) in noticeList" @click="showTipsPopup(item)">
              <uni-icons color="#de8c17" type="sound" size="30"></uni-icons>
              <view style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{ item.memo }}</view>
            </swiper-item>
          </swiper>
          <!-- <uni-notice-bar show-icon scrollable
            :text="notice" /> -->
        </view>
        <view class="ability">
          <view class="item" v-for="(item, index) in store?.facilities" :key="index">
            <image :src="item.icon" />
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
        <view class="address-img">
          <!-- <swiper
            class="swiper-box"
            style="height: 240rpx"
            :autoplay="true"
            :circular="true"
            @change="change"
          >
            <swiper-item v-for="(item, index) in store.imgList" :key="index">
              <image
                :src="item.shopImgUrl"
                mode="scaleToFill"
                v-if="item.imgType == 1"
              />
            </swiper-item>
          </swiper> -->
          <image :src="headImg" />
          <view class="address-bg">
            <image class="address-icon" mode="widthFix" src="/static/home-address.png" />
            <view class="distance">距离{{ filterTofixed(store.distance) }} |
              {{ store.shopAddress }}</view>
          </view>
        </view>
        <view class="navigation">
          <view class="item" @click="goStore">
            <image src="/static/map.png" />
            <view>
              <view class="c333">地图导航</view>
              <view class="c999">位置与导航</view>
            </view>
          </view>
          <view class="item" @click="goPicPage">
            <image src="/static/yd.png" />
            <view>
              <view class="c333">图文指引</view>
              <view class="c999">地铁/开车指引</view>
            </view>
          </view>
        </view>
      </view>
      <view class="predetermine">
        <view class="predetermine-l box" @click="goStoreList">
          <image src="/static/jskt.png" />
          <view class="c333">即时开台</view>
          <view class="c666">当前共有{{ store.leisureBilliardNumber || 0 }}张空闲球台</view>
          <view class="c666">可立即开启</view>
        </view>
        <view class="predetermine-r">
          <view class="box predetermine-r-t" @click="onPreferential">
            <image src="/static/yhyd.png" />
            <view>
              <view class="c333">优惠预订</view>
              <view class="c666">提前预定享折扣</view>
              <view class="c666">1小时起订</view>
            </view>
          </view>
          <view class="box predetermine-r-b" @click="onGroup">
            <view class="icons">
              <image src="/static/tg.png" />
            </view>
            <view class="c333">团购券开台</view>
          </view>
        </view>
      </view>
    </view>
    <tab-bar ref="tabBarRef"></tab-bar>
  </view>
  <view class="reservation" v-if="isPreStart" @click="openOrder">
    <view>
      <view>利思泰自助台球（打浦桥店）</view>
      <view style="display:flex">距开始时间：
        <uni-countdown
            color="#fff"
            :font-size="10"
            splitorColor="#fff"
            :show-day="false"
            :hour="preStartTIme.lastHours"
            :minute="preStartTIme.lastMinute"
            :second="preStartTIme.lastSecond"
          ></uni-countdown>
      </view>
    </view>
    <image
      src="../../static/dow.png"
    />
  </view>
  <uni-popup ref="wxpopup">
    <view class="wx-popup">
      <image class="wx-code" :src="store.linkWxCode" />
      <view @click="wxCopy" class="wx-wechat">店长微信号：{{ store.wxNo }}
        <image class="wx-copy" src="../../static/copy.png" />
      </view>
      <view class="wx-code-text" @click="keepImg">保存到相册</view>
    </view>
  </uni-popup>
  <uni-popup ref="activePopup">
    <view class="active-popup-box">
      <view class="active-top">
        <image
          class="active-top-img"
          :src="topUrl"
          mode="scaleToFill"
        />
        <view class="title">{{ activeObj.name }}</view>
      </view>
    <image class="close" src="../../static/close.png" @click="activeClose" />
      <view class="active-popup" :style="{backgroundImage:`url('${activeBackGround}')`}">
      <!-- <view class="title">{{ activeObj.name }}</view> -->
      <view class="list">
        <view class="item box" @click="selectCoupon(item)" v-for="item in activeList" :style="filterBgImg(item)"> 
          <view class="item-l">
              <!-- <view class="time">{{ discountTypeObj[item.discountType] || "" }}</view> -->
              <view class="time" v-if="item.discountType == 11">{{ item.discountPrice / 100 }}元</view>
              <view class="time-m" v-if="item.discountType == 11">满{{ item.usePrice / 100 }}元</view>
              <view class="time" v-if="item.discountType == 12">{{ item?.discountTime }}折</view>
              <view class="time-m" v-if="item.discountType == 12">满{{ item?.discountLimitTime }}小时</view>
          </view>
          <view class="item-r">
            <view class="name">{{ item.name }}</view>
            <view class="time" v-if="item.validityType == 1">有效期至{{ filterTime(item.validEndTime) }}</view>
            <view class="time" v-if="item.validityType == 2">有效期至{{ filterTimeToDay(item.fixedEndTerm - item.fixedStartTerm + 1) }}</view>
          </view>

        </view>
      </view>
      <!-- <view class="btn" @click="activeClose">立即领取</view> -->
    </view>
    </view>
  
    
  </uni-popup>
  <uni-popup ref="tipsPopup" type="bottom">
    <view class="tips-popup">
      <view class="tips-content">
        <view class="tips-header">
          <text class="title">{{ tipsContent.title }}</text>
          <text class="close" @click="closeTipsPopup">×</text>
        </view>
        <view class="tips-body">
          <view class="tips-text" :key="index">{{ tipsContent.memo}}</view>
        </view>
        <view class="tips-footer">
          <view class="btn call-btn" @click="telPhone" v-if="store.shopTel">
            <image src="/static/phone.png" mode="widthFix" />
            <text>打电话</text>
          </view>
          <view class="btn chat-btn" @click="showWxCode">
            <image src="/static/wx.png" mode="widthFix" />
            <text>咨询店长</text>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
  </view>
</template>
<script setup>
import tabBar from "../../components/tabBar";
import {
  ref,
  reactive,
  watch,
  getCurrentInstance,
  onMounted,
  nextTick,
} from "vue";
import { onLoad, onShow ,onShareAppMessage} from "@dcloudio/uni-app";
import { getBannerList, queryShopPage, getWallet, getListActivity ,getcoupon,getRecentlypreOrder,preOrderWithOnline,getNotice} from "@/service/index";
import { getUrlValue } from "@/untils/common";
import dayjs from "dayjs";
import {getUser} from '@/service/user'
let currentInstance = "";
const headImg = ref('')
const activePopup = ref()
const activeList = ref([])
const activeObj = ref({})
const ability = ref([
  {
    src: "/static/mj.png",
    name: "面积130m²",
  },
  {
    src: "/static/zs.png",
    name: "5张中式",
  },
  {
    src: "/static/ylj.png",
    name: "饮料机",
  },
  // {
  // 	src: "/static/ccg.png",
  // 	name: "存杆柜"
  // },
  {
    src: "/static/lyyx.png",
    name: "蓝牙音响",
  },
]);
const store = ref({});
const wxpopup = ref(null);
const tabBarRef = ref(null);
const bannerList = ref([]);
const latitude = ref(0);
const longitude = ref(0);
const userInfo = ref({})
const topUrl = ref()
const notice = ref('')
const noticeList = ref([])
const myMoney = ref({
  balance: 0,
})
const counponNum = ref(0)
const saomaStoreId = ref(null)
const activeBackGround = ref('')
const preStartTIme = ref({
lastHours:0,
lastMinute:0,
lastSecond:0
}) // 预约开台倒计时
const isPreStart = ref(false)
onShareAppMessage(()=>({
  title: '', // 默认为小程序名称
  path: '', // 默认为当前页面路径
  imageUrl: '' // 默认为当前页面的截图
}))
onLoad((query) => {
  console.log(query, 111);
  const q = decodeURIComponent(query.q);
  console.log(q, "q");
  if(query.s){ // 小程序码进入
    if(query.s == 2){
      uni.setStorageSync("storeId", 5);
      saomaStoreId.value = 5;
      return;
    }
    uni.setStorageSync("storeId", query.s);
    saomaStoreId.value = query.s;
    console.log(saomaStoreId.value,'saomaStoreId.value');
  } 
  if(q == 'undefined'){
    getActive(12);
  }
  if (q) {
    const t = getUrlValue(q, "t");
    const c = getUrlValue(q, "c");// 门店加桌号
    const s = getUrlValue(q, "shopId") || getUrlValue(q, "s");  // 门店id
    if (t == "1") {
      const arr = c.split("-");
			if(arr[0] == 2){ // 因为数据库存的是5，但是二维码已经打印了是2，转换一下
				arr[0] = 5
			}
			uni.setStorageSync("storeId", arr[0]);
			saomaStoreId.value = arr[0]
      uni.navigateTo({
        url: `/pages/order/placeOrder?id=${arr[0]}&no=${c}`,
      });
    }
    if (t == '2') {
      if(s){
        saomaStoreId.value = s;
      }
      uni.navigateTo({
        url: `/pages/recharge/index`,
      });
    }
    if (t == '3') {
      const id = getUrlValue(q, "shopId");
      uni.navigateTo({
        url: `/pages/order/placeOrder?id=${id}`,
      });
    }
    if(t == '5'){ // 扫码开门
      const id = getUrlValue(q, "shopId");
	  //tc = typeCode 即，机器类型。typeCode = MainDoor主门。 后期可能有侧门或其他物联设备。
	  //TODO 直接将params转为键值对，传给后端，前端只进行透传，不处理业务逻辑。
	  const tc = getUrlValue(q, "tc");
      saomaStoreId.value = id
      uni.navigateTo({
        url: `/pages/login/openDoor?id=${id}&tc=${tc}`,
      });
    }
  }
});
const checkStore = () => {
  saomaStoreId.value = null;
  uni.navigateTo({
    url: '/pages/store/index'
  })
}
const filterTime = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}
const filterTimeToDay = (date) => {
  return dayjs().add(date, 'day').format('YYYY-MM-DD HH:mm:ss')
}
const filterBgImg = (item)=>{
 const obj = activeObj.value.itemList.filter((v)=>{
  return v.templateId === item.id
  })?.[0]
  if(obj){
    return {
      backgroundImage:`url('${obj.itemBackgroundUrl}')`,
      backgroundPosition: 'center center',
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
    }
  }
}
const openOrder = ()=>{
  uni.showModal({
    content: '确认开台吗？',
    showCancel: true,
    success: ({ confirm, cancel }) => {
      if(confirm){
          preOrderWithOnline({no:orderData.value.no}).then(res=>{
          uni.showToast({
            title: '开台成功',
            icon: 'none',
          })
          getList();
        })
      }
    }
  })
}
const orderData = ref({})
const getReservation = ()=>{
  isPreStart.value = false;
  const newDate = dayjs().valueOf()
  getRecentlypreOrder().then(res=>{
    if(res){
      isPreStart.value = true;
      orderData.value = res
      if(newDate < res.billStartTime){
        console.log('2222222',res.billStartTime - newDate);
        
        const date = res.billStartTime - newDate
           preStartTIme.value = {
            lastHours: Math.floor(date / 3600),
            lastMinute:Math.floor((date % 3600) / 60),
            lastSecond:date % 60,
          }
      }
   
    }
  })
}
const getNoticeData = ()=>{
  getNotice({
    pageNo: 1,
    pageSize: 10,
    status: 1
  }).then(res=>{
    console.log(res,'res');
    noticeList.value = res?.list || [];
    notice.value = ''
     noticeList.value?.forEach(v=>{
      notice.value += v.memo + '。'
    })
  })
}
const goCoupon = ()=>{
  uni.navigateTo({
    url: '/pages/coupon/index'
  })
}
const goLogin = ()=>{
  uni.navigateTo({
    url: '/pages/login/index'
  })
}
const init = async () => {
  console.log(112);
  // 获取用户的经纬度
  await uni.getLocation({
    type: "wgs84",
    success: function (res) {
      console.log(res);
      console.log("当前位置的经度：" + res.longitude);
      console.log("当前位置的纬度：" + res.latitude);
      latitude.value = res.latitude;
      longitude.value = res.longitude;
      uni.setStorageSync("latAndLong", {
        latitude: res.latitude,
        longitude: res.longitude,
      });
      getBanner();
      getFirstData();
      getMyMoney();
    },
    fail(err) {
      console.error("获取地址失败", err);
    },
  });
  getcouponData();
  getBanner();
  getFirstData();
  getMyMoney();
  getNoticeData();
  // getActive(); // 优惠卷
  uni.setStorageSync("selectedIndex", 0);
  nextTick(() => {
    tabBarRef.value && tabBarRef.value.init();
  });
};
const getMyMoney = () => {
  getWallet({ isLogin: true }).then(res => {
    console.log(res, 'res');
    myMoney.value = res;
  })
}
const getUserInfo = ()=>{
 userInfo.value = uni.getStorageSync('userInfo') || {}
}
const getActive = (code = undefined) => {
  getListActivity({eventCode:code}).then(res => {
    if (res.length) {
      activeObj.value = res[0]
      activeList.value = res[0].templateList;
      activeBackGround.value = res[0].backgroundUrl;
      topUrl.value = res[0].topUrl;
      activePopup.value.open()
    }
  })
  
}
const getcouponData = ()=>{
  getcoupon({status:1,pageNo:1,pageSize:100}).then(res => {
        console.log(res);
        counponNum.value = res?.list.length || 0
    })
}
const activeClose = () => {
  activePopup.value.close();
  uni.showToast({
    title: '领取成功，请前往我的优惠券查看',
    icon: 'none'
  });
}
const filterTofixed = (value) => {
  if (value > 1) {
    return value.toFixed(1) + "km";
  }
  if (value < 1) {
    return (value * 1000).toFixed(0) + "m";
  }
  return 0;
};
const getBanner = () => {
  getBannerList({ position: 1 }).then((res) => {
    bannerList.value = res;
  });
};
const goRecharge = () => {
  if (!isLogin()) {
    return;
  }
  uni.navigateTo({
    url: '/pages/recharge/index'
  })
}
const goStoreList = () => {
  if (!isLogin()) {
    return;
  }
  uni.navigateTo({
    url: `/pages/order/placeOrder?id=${store.value.id}`,
  });
};
const goPicPage = () => {
  uni.navigateTo({
    url: `/pages/store/guide?id=${store.value.id}`,
  });
};
const onPreferential = () => {
  wx.showToast({
    title: "功能即将上线",
    icon: "none",
  });
  // uni.navigateTo({
  //   url: `/pages/predetermine/index`,
  // });
  if (!isLogin()) {
    return;
  }
};
const onGroup = () => {
  if (!isLogin()) {
    return;
  }
  uni.navigateTo({
    url: `/pages/coupon/detail?id=${store.value.id}`,
  });
};
const getFirstData = () => {
  const params = {
    pageNo: 1,
    pageSize: 10,
  };
  queryShopPage(params).then((res) => {
    console.log(res);
    const storeInfo = uni.getStorageSync('mainStoreInfo')
    console.log(saomaStoreId.value,'saomaStoreId.value');
		if(saomaStoreId.value){
			store.value = res.list?.filter((v)=>{
				return v.id == saomaStoreId.value
			})[0]
			uni.setStorageSync("store", store.value);
			uni.setStorageSync('mainStoreInfo',store.value)
			// saomaStoreId.value = null;
      store.value.imgList?.forEach(item => {
      if (item.imgType === 1) {
        headImg.value = item.shopImgUrl;
      }
    });
			return;
		}
    if (storeInfo) {
				const obj =	res.list?.filter((v)=>{
				return v.id === storeInfo.id
			})[0]
      store.value = obj;
    } else {
      store.value = res.list?.[0] || {};
    }
    store.value.imgList?.forEach(item => {
      if (item.imgType === 1) {
        headImg.value = item.shopImgUrl;
      }
    });
    uni.setStorageSync("store", store.value);
  });
};
const keepImg = () => {
  uni.getImageInfo({
        src: store.value.linkWxCode,
        success: (url) => {
          console.log(url,'url');
          
          uni.saveImageToPhotosAlbum({
            filePath: url.path,
            success: function () {
              uni.showToast({
                title: '保存成功',
                icon: 'none'
              });
            },
            fail: (err) => {
              console.log(err, 'saveImageToPhotosAlbum');
              uni.showToast({
                title: '保存失败',
                icon: 'none'
              });
            }
          });
        },
        fail: (err) => {
            console.log('err===', err)
            showToast(err)
        }
    });

}
const wxCopy = () => {
  uni.setClipboardData({
    data: store.value.wxNo,
    success: function () {
      uni.showToast({
        title: '复制成功',
        icon: 'none'
      });
    }
  });
}
const goStore = () => {
  console.log(latitude.value, store.value.latGd);
  const latitudes = store.value.latGd - 0;
  const longitudes = store.value.lonGd - 0;
  wx.openLocation({
    latitude: latitudes,
    longitude: longitudes,
    name: store.value.shopName,
    address: store.value.shopAddress,
    success: function (res) {
      console.log(res);
    },
    fail(err) {
      console.error("打开地图失败", err);
    },
  });
};
const telPhone = () => {
  uni.makePhoneCall({
    // phoneNumber: "13817904796",
    phoneNumber: store.value.shopTel,
  });
};
const showWxCode = () => {
  console.log(currentInstance.refs, wxpopup.value);
  wxpopup.value.open();
  tipsPopup.value.close();
  // currentInstance.refs.wxpopup.open()
};
const isLogin = () => {
  const openid = uni.getStorageSync("openid");
  if (!openid) {
    uni.navigateTo({
      url: "/pages/login/index",
    });
    return false;
  }
  return true;
};
const getUserInfoData = ()=>{
    getUser().then(res=>{
        uni.setStorageSync('userInfo', res);
        userInfo.value = res;
    })
}
const tipsPopup = ref(null)
const tipsContent = ref({
  title:'',
  memo:'',
})

// 显示公告弹窗
const showTipsPopup = (item) => {
  tipsContent.value = item
  // 这里可以从接口获取公告内容
  tipsPopup.value.open()
}

// 关闭公告弹窗
const closeTipsPopup = () => {
  tipsPopup.value.close()
}
onShow(() => {
  currentInstance = getCurrentInstance();
  init();
  getUserInfoData();
  
  uni.$on('phoneLogin', function (data) {
    console.log('手机登陆事件');
    getActive(1)
  })
  uni.$on('login', function (data) {
    console.log('全局登陆事件');
    getUserInfo();
    getUserInfoData();
    getMyMoney();
    getcouponData();
    getNoticeData();
  })
});
</script>
<style lang='less' scoped>
.content {
  position: relative;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  // .switch-store {
  //   position: fixed;
  //   top: 50%;
  //   left: 0;
  //   background-color: #009a44;
  //   color: #fff;
  //   padding: 5rpx 10rpx;
  //   border-radius: 0 12rpx 12rpx 0;
  //   z-index: 100;
  //   opacity: 0.8;
  // }

  .head-bg {
    height: 500rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .main {
    padding: 24rpx;
    position: relative;
    top: -100rpx;
    .login-user{
      padding: 24rpx 26rpx;
      margin-bottom: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .login-user-l{
        display: flex;
        align-items: center;
        .logo{
          width: 198rpx;
          height: 72rpx;
          margin-right: 20rpx;
        }
        .avatar{
          width: 84rpx;
          height: 84rpx;
          margin-right: 20rpx;
          border-radius: 50%;
        }
        .login-user-m{
          .m-t{
            font-weight: 600;
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 10rpx;
          }
          .m-b{
            font-weight: 400;
            font-size: 22rpx;
            color: #999999;
          }
        }
      }
      .login-user-r{
          background: linear-gradient( 315deg, #00B952 0%, #00E565 100%), #009A44;
          border-radius: 38rpx;
          padding: 14rpx 18rpx;
          font-size: 26rpx;
          color: #FFFFFF;
        }
        .counpon{
          display: flex;
          align-items: center;
          font-size: 22rpx;
          color: #999999;
          
          .num{
            font-weight: 600;
            font-size: 32rpx;
            color: #333333;
            margin-left: 16rpx;
          }
          image{
            width: 12rpx;
              height: 21rpx;
              margin-left: 10rpx;
          }
        }
    }
    .info {
      padding: 24rpx 26rpx;
      margin-bottom: 24rpx;

      .info-tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12rpx;
        .title {
          font-size: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          color: #333333;
          font-weight: bold;
          display: flex;
          align-items: center;
          .wxcode,.tel{
            width: 40rpx;
            height: 40rpx;
            margin-left: 10rpx;
            margin-right: 10rpx;
          }
        }
        .switch-store{
          display: flex;
          align-items: center;
          border-radius: 16rpx;
          border: 2rpx solid #009a44;
          color: #009a44;
          font-size: 24rpx;
          padding: 4rpx 10rpx;
          image{
            width: 40rpx;
            height: 40rpx;
          }
        }
        .contact {
          font-size: 20rpx;
          flex-wrap: nowrap;
          display: flex;
          align-items: center;

          image {
            width: 40rpx;
            height: 40rpx;
            margin-left: 10rpx;
          }
        }
      }

      .info-c {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info-c-b{
          display: flex;
          align-items: center;
          .contact {
          font-size: 20rpx;
          flex-wrap: nowrap;
          display: flex;
          align-items: center;
          margin-bottom: 30rpx;
          image {
            width: 40rpx;
            height: 40rpx;
            margin-left: 10rpx;
          }
        }
        }
        .info-c-r {
          width: 158rpx;
          height: 88rpx;
          border-radius: 16rpx;
          border: 2rpx solid #FF5D15;

          .info-c-r-t {
            height: 50%;
            color: #FF5D15;
            text-align: center;
            font-weight: 600;
            font-size: 26rpx;
          }

          .info-c-r-b {
            text-align: center;
            color: #fff;
            height: 50%;
            background: #FF5D15;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0 0 16rpx 16rpx;

            .jt {
              width: 12rpx;
              height: 21rpx;
              margin-left: 10rpx;
            }
          }
        }
      }

      .price {
        font-size: 30rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #f20707;
        margin-bottom: 20rpx;
      }

      .business-hours {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;

        .business {
          background: #009a44;
          border-radius: 12rpx 0rpx 0rpx 12rpx;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          padding: 4rpx 10rpx;
        }

        .hours {
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #009a44;
          background-color: rgba(0, 154, 68, 0.1);
          padding: 4rpx 16rpx;
          border-radius: 0 12rpx 12rpx 0;
        }
      }

      .ability {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item {
          display: flex;
          align-items: center;
          flex-direction: column;
          width: 25%;
          flex-wrap: wrap;
          margin-bottom: 20rpx;
          font-size: 22rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          
          image {
            width: 50rpx;
            height: 50rpx;
            margin-bottom: 10rpx;
          }
        }
      }

      .address-img {
        position: relative;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        height: 240rpx;

        image {
          width: 100%;
          height: 240rpx;
          border-radius: 10rpx;
        }

        .address-bg {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.67);
          height: 56rpx;
          line-height: 45rpx;
          color: #fff;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          display: flex;
          align-items: center;
          overflow: hidden;
          text-overflow: ellipsis;

          .address-icon {
            width: 23rpx;
            height: 28rpx;
            margin-right: 10rpx;
            margin-left: 20rpx;
          }

          .distance {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }

      .navigation {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;

          &:first-child {
            border-right: 2rpx solid #eeeeee;
          }

          image {
            width: 45rpx;
            height: 45rpx;
            margin-right: 40rpx;
          }

          .c333 {
            font-size: 26rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #333333;
            margin-bottom: 6rpx;
          }

          .c999 {
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }

    .predetermine {
      display: flex;

      .predetermine-l {
        width: 50%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        height: 300rpx;
        margin-right: 24rpx;

        image {
          width: 64rpx;
          height: 64rpx;
        }
      }

      .predetermine-r {
        width: 50%;

        .predetermine-r-t {
          height: 184rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 24rpx;

          image {
            width: 64rpx;
            height: 60rpx;
            margin-right: 20rpx;
          }
        }

        .predetermine-r-b {
          height: 92rpx;
          background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
          display: flex;
          align-items: center;
          justify-content: center;

          .icons {
            display: flex;
            align-items: center;
            margin-right: 10rpx;

            image {
              width: 132rpx;
              height: 40rpx;
              margin-right: 6rpx;
            }
          }
        }
      }

      .c333 {
        font-size: 30rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #333333;
      }

      .c666 {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #666666;
      }
    }
  }
}
.reservation{
  position:fixed;
  right: 0;
  bottom: 15%;
  width: 362rpx;
  height: 96rpx;
  background: linear-gradient( 315deg, #00B952 0%, #00E565 100%), #009A44;
  box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.25);
  border-radius: 200rpx 0rpx 0rpx 200rpx;
  color: #fff;
  font-size: 22rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  image{
    width: 24rpx;
    height: 22rpx;
  }
}
.tips{
  height: 60rpx;
  border-radius: 20rpx;
}
.tips-popup {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
  padding-bottom: 150rpx;
  .tips-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .close {
      font-size: 40rpx;
      color: #999;
      padding: 10rpx;
    }
  }
  
  .tips-body {
    .tips-text {
      font-size: 28rpx;
      color: #333;
      line-height: 1.8;
      margin-bottom: 30rpx;
    }
  }
  
  .tips-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    
    .btn {
      flex: 1;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 44rpx;
      margin: 0 20rpx;
      
      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 20rpx;
      }
      
      text {
        font-size: 28rpx;
      }
    }
    
    .call-btn {
      background-color: rgba(86, 119, 252,50%);
      color: #fff;
    }
    
    .chat-btn {
      background-color: rgba(7, 193, 96,50%);
      color: #fff;
    }
  }
}
.wx-popup {
  background-color: #fff;
  padding: 20rpx;
  break-before: 20rpx;

  .wx-copy {
    width: 40rpx;
    height: 40rpx;
    margin-left: 10rpx;
  }

  .wx-wechat {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10rpx;
  }

  .wx-code {
    height: 800rpx;
  }

  .wx-code-text {
    height: 100rpx;
    background: linear-gradient(315deg, #00b952 0%, #00e565 100%);
    border-radius: 60rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20rpx;
  }
}
.active-top-img{
  height: 320rpx;
  width: 100%;
  position: relative;
  top: 10rpx;
}
.active-popup-box{
  position: relative;
  .close{
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    bottom: -60rpx;
    width: 50rpx;
    height: 50rpx;
  }
}
.active-top{
  position: relative;
  .title {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: 800;
    font-size: 60rpx;
    line-height: 90rpx;
    text-shadow: 0px 4px 8px rgba(175,57,27,0.25);
    text-align: center;
    font-style: normal;
    background-image: linear-gradient(270deg, #F8E2A7 0%, #FFFBE6 100%);
    background-clip: text;
    color: transparent;
  }
}
.active-popup {
  // padding: 20rpx;
  // border-radius: 20rpx;
  // background: #EA492B;
  height: 550rpx;
  display: flex;
  flex-direction: column;
  background-position: center center;
  background-repeat: no-repeat;
  // background-attachment: fixed;
  background-size: cover;
  position: relative;
  border-radius: 0 0 40rpx 40rpx;


  .list {
    flex: 1;
    overflow-y: scroll;
    padding: 0 24rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;
      height: 160rpx;
      padding: 0 24rpx;

      .item-l {
        text-align: center;
        margin-right: 20rpx;

        .time {
          font-size: 36rpx;
          font-weight: 600;
          color: #FF5D15;
          margin-bottom: 10rpx;
        }

        .time-m {
          background: rgba(255, 93, 21, 0.1);
          padding: 8rpx 12rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #FF5D15;
        }
      }

      .item-r {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;

        .name {
          margin-bottom: 20rpx;
        }

        .time {
          font-size: 26rpx;
          color: #999999;
          font-weight: 400;
        }
      }

      .icon {
        width: 36rpx;
        height: 36rpx;
      }
    }
  }

  .btn {
    height: 100rpx;
    background: linear-gradient(315deg, #00b952 0%, #00e565 100%);
    border-radius: 60rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20rpx;
  }
}
</style>